import React from 'react';
import style from './style.reviewContent.styl';
import {isEmpty} from 'lodash';
import moment from 'moment';
import {IconFont,Button,Link,Tooltip} from '../../../../ui-components';
import ReviewCard from './ReviewCard';
import util from '../../../../util';
import cx from 'classnames';

const CONFIG = {
  'doing': {
    activity: '撰写自评',
    review: '撰写同事反馈',
    reviewManager: '撰写主管反馈',
  },
  'done': {
    activity: '我收到的反馈',
    review: '给同事的反馈',
    reviewManager: '给下属的反馈',
  },
}

class ReviewContent extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ReviewContent';
  }
  shouldComponentUpdate(nextProps, nextState) {
    const {
      reviewer,
      reviewerManager,
      activities,
      item,
    } = nextProps;
    if(reviewer && reviewerManager && activities && item) return true;
    else return false;
  }
  getVoid = (text) => {
    return (
      <div style={{padding: '18px 5px 0', textAlign: 'center', color: '#555'}}>
        <div className={style['item-box']} style={{padding: '60px 0'}}>
          {text}
        </div>
      </div>
    );

  }
  render() {
    const {
      item,
      reviewer = [],
      reviewerManager = [],
      activities = {},
    } = this.props;
    const reviewerP = (reviewer||[]).filter(v => v.invitationDisplayType !== 8);
    if(isEmpty(item)) return null;
    const {
      templateName,
      questions = [],
      startTime: startTimeStamp,
      selfReviewDeadline: selfReviewDeadlineStamp,
      peerReviewDeadline: peerReviewDeadlineStamp,
      publishedTime: publishedTimeStamp,
      publicDeadline: publicDeadlineStamp,
      endTime: endTimeStamp,
      state,
    } = item;
    const {
      activityDisplayType = 3,
    } = activities;
    const nowStamp = new Date().getTime();
    const startTime = util.time(+startTimeStamp);
    const endTime = util.time(+endTimeStamp);
    const selfReviewDeadline = util.time(+selfReviewDeadlineStamp);
    const peerReviewDeadline = util.time(+peerReviewDeadlineStamp);
    const publishedTime = util.time(+publishedTimeStamp);
    const publicDeadline = util.time(+publicDeadlineStamp);
    const type = nowStamp > publicDeadlineStamp ? 'done' : 'doing';
    const indexFlag = nowStamp > publishedTimeStamp && nowStamp < selfReviewDeadlineStamp ? 1 :
      nowStamp > selfReviewDeadlineStamp && nowStamp < peerReviewDeadlineStamp ? 2 : 
      nowStamp > peerReviewDeadlineStamp && nowStamp < publicDeadlineStamp ? 3 : 0;
    return (
      <div className={style['area']}>
        <div className={style['item-box']} style={{paddingTop: '25px', paddingBottom: '25px'}}>
          <h2><div>{templateName}</div> <span>对应工作阶段：{startTime}~{endTime}</span></h2>
          <div className={style['table']}>
            <div className={style['question-area']}>
              <h2>公共问题</h2>
              {
                questions.map((v, i) => {
                  return <div key={`question_${i}`} className={style['question-item']}><IconFont value='weixin' className={style['icon']}/>{v}</div>
                })
              }
            </div>
            <div className={style['info-area']}>
              <p>发起日: {publishedTime}</p>
              <p>自评截止日: {selfReviewDeadline}</p>
              <p>同事反馈截止日: {peerReviewDeadline}</p>
              <p>流程结束如: {publicDeadline}</p>
            </div>
          </div>

        </div>
        <div className={cx({
          [style['time-line-area']]: true,
          [style['time-line-area-done']]: type === 'done',
        })}>
          {
            type === 'done' ? null : <div className={style['time-line']}></div>
          }
          {
            type === 'done' ? null : 
            <div className={style['time-line-box']}>
              <div className={style['time-line-item']}>
                <span>{publishedTime} 发起</span>
              </div>
            </div>
          }
          
          {
            type === 'done' && isEmpty(activities) ? null : 
            <div className={style['module-box']}>
              {type === 'doing' && indexFlag ===1 ? <div><div className={style['today']}></div><div className={style['today-line']}></div></div>: null}
              <div className={style['module-item']}>
                <div className={style['module-title']}>{CONFIG[type]['activity']}</div>
                {
                  isEmpty(activities) ? this.getVoid('公司员工将在这一阶段撰写自评，并邀请同事给予反馈') :
                  <div style={{padding: '18px 5px 0', textAlign: 'center'}}>
                    {
                      type === 'doing' ? 
                      (
                        <div className={style['item-box']}>
                          {
                            activityDisplayType === 4 ? 
                            <div><div className={style['warning-info']}>您已逾期，提交后不可修改</div></div>
                            : 
                            activityDisplayType === 5 ? 
                            <div><div className={style['warning-info']}>您已逾期，不可修改</div></div>
                            : null
                          }
                          {
                            activityDisplayType === 4 || activityDisplayType === 1 ? 
                            <Button className={style['button']} label={'立即撰写'} 
                              onClick={() => {this.context.router.push(`/review/self/${activities.activityId}/create`)}} 
                            />
                            : 
                            activityDisplayType === 2 ?
                            <Button className={style['button2']} label={'查看/修改'} 
                              onClick={() => {this.context.router.push(`/review/self/${activities.activityId}/create`)}} 
                            />
                            : 
                            activityDisplayType === 3 ?
                            <Button className={style['button2']} label={'查看'} 
                              onClick={() => {this.context.router.push(`/review/self/${activities.activityId}/detail`)}} 
                            />
                            : null
                          }
                         
                          {
                            (activities.peerReviewInvitationVOs || []).length ?
                            <div className={style['user-list']}>
                              <div className={style['user-list-title']}>已邀请给我反馈的同事</div>
                              {
                                ([activities.managerReviewInvitationVO, ...activities.peerReviewInvitationVOs] || []).map((v, i) => {
                                  if(isEmpty(v)) return null;
                                  const {
                                    invitationDisplayType
                                  } = v;
                                  const isCanceled = invitationDisplayType === 7;
                                  const isSubmitted = !!~[3,4].indexOf(invitationDisplayType);
                                  return (
                                    <div className={style['user-list-item']}>
                                      <Tooltip tip={`${v.reviewerUserProfile.fullName} ${isCanceled?'已拒绝邀请':isSubmitted?'已经反馈':'尚未反馈'}`} arrow={'top'} className={style['user-list-tip']}>
                                        <Link 
                                          key={i}
                                          className={cx({
                                            [style['settings-avatar']]: true,
                                            [style['settings-avatar-manager']]: v.isManager,
                                          })} 
                                          srcIcon="avatar"
                                          width="50"
                                          src={v.reviewerUserProfile.avatarUrl}
                                        />
                                        {
                                          isCanceled ? 
                                          <IconFont value="stop" style={{position: 'absolute',color: '#ee7d9e',background: '#fff',
                                            borderRadius: '50%',bottom: '10px',right: '10px',fontSize: '16px'}}/>
                                          :
                                          isSubmitted ?
                                          <IconFont value="tick" style={{position: 'absolute',color: '#fff',background: '#59d46c',
                                            borderRadius: '50%',bottom: '10px',right: '10px',fontSize: '24px'}}/>
                                          : null
                                        }
                                      </Tooltip>
                                    </div>
                                  )
                                })
                              }
                            </div>
                            :null
                          }
                          
                        </div>
                      ):(
                        <div className={style['item-box']}>
                          <div className={style['item-info']}>
                            <div className={style['item-info-box']}>
                              <h2>主管评分</h2>
                              <p>{(activities.managerReviewInvitationVO||{}).score/100 || '?'}<span>分</span></p>
                            </div>
                            <div className={style['item-info-box']}>
                              <h2>邀请反馈同事</h2>
                              <p>{(activities.peerReviewInvitationVOs||[]).length}<span>位</span></p>
                            </div>
                            <div className={style['item-info-box']}>
                              <h2>收到同事反馈</h2>
                              <p>{(activities.peerReviewInvitationVOs||[]).filter(v => v.isSubmitted).length}<span>分</span></p>
                            </div>
                          </div>
                          <Button className={style['button2']} label={'点击查看'} 
                            onClick={() => {this.context.router.push(`/review/report/${activities.activityId}`)}} 
                          />
                        </div>
                      )
                    }
                  </div>
                }
              </div>
            </div>
          }
          {
            type === 'done' ? null : 
            <div className={style['time-line-box']}>
              <div className={style['time-line-item']}>
                <span>{selfReviewDeadline} 自评截止</span>
              </div>
            </div>
          }
          {
            type === 'done' && (!reviewerP || !reviewerP.length) ? null : 
            <div className={style['module-box']}>
              { type === 'doing' && indexFlag ===2 ? <div><div className={style['today']}></div><div className={style['today-line']}></div></div>: null}
              <div className={style['module-item']}>
                <div className={style['module-title']}>{CONFIG[type]['review']}</div>
                {
                  !reviewerP || !reviewerP.length ? this.getVoid('自评截止日后，同事对您的反馈邀请将展示在这里') :
                  <div style={{padding: '18px 5px 0',margin:'0 -28px -28px 0'}}>
                    {
                      reviewerP.map((v, i) => {
                        return <ReviewCard key={i} item={v} type={type} deadLine={peerReviewDeadlineStamp}
                          onClick={() => {this.context.router.push(`/review/peer/${v.invitationId}/fill`)}} 
                        />;
                      })
                    }
                  </div>
                }
              </div>
            </div>
          }
          {
            type === 'done' ? null : 
            <div className={style['time-line-box']}>
              <div className={style['time-line-item']}>
                <span>{peerReviewDeadline} 同事反馈截止</span>
              </div>
            </div>
          }
          {
            type === 'done' && (!reviewerManager || !reviewerManager.length) ? null : 
           <div className={style['module-box']}>
              {type === 'doing' && indexFlag ===3 ? <div><div className={style['today']}></div><div className={style['today-line']}></div></div> : null}
              <div className={style['module-item']}>
                <div className={style['module-title']}>{CONFIG[type]['reviewManager']}</div>
                {
                  !reviewerManager || !reviewerManager.length ? this.getVoid('您的主管将在这一阶段，根据你的自评和同事的反馈撰写主管反馈') :
                  <div style={{padding: '18px 5px 0',margin:'0 -28px -28px 0'}}>
                    {
                      reviewerManager.map((v, i) => {
                        return <ReviewCard key={i} item={v} type={type} deadLine={publicDeadlineStamp}
                          onClick={() => {this.context.router.push(`/review/peer/${v.invitationId}/fill`)}} 
                        />;
                      })
                    }
                  </div>
                }
              </div>
            </div>
          }
          {
            type === 'done' ? null : 
            <div className={style['time-line-box']}>
              <div className={style['time-line-item']}>
                <span>{publicDeadline} 流程结束</span>
              </div>
            </div>
          }
        </div>
      </div>
    );
  }
}

export default ReviewContent;
